<template>
    <Card>
        <!--条件-->
        <Row class="form-row">
            <Form :model="filters" ref="form_query" label-position="right" :label-width="90" inline>
                <FormItem label="小区名称" prop="name">
                    <div class="filters-input">
                        <el-select v-model="filters.housingId" @change="houseChange" filterable default-first-option
                                   placeholder="请选择小区" :clearable="true" no-data-text="暂无数据">
                            <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </FormItem>
                <FormItem label="停车场名称" prop="name">
                    <div class="filters-input">
                        <el-select v-model="filters.parkingId" @change="parkingLotChange" filterable default-first-option
                                   placeholder="请选择停车场" :clearable="true" no-data-text="暂无数据">
                            <el-option v-for="item in parkingList" :key="item.parkingId" :value="item.parkingId" :label="item.parkingName" >
                            </el-option>
                        </el-select>
                    </div>
                </FormItem>
                <FormItem>
                    <Button type="primary" icon="ios-search" @click="loadData">
                        搜索
                    </Button>
                </FormItem>
            </Form>
        </Row>

        <!--数据展示-->
        <Row>
            <el-table stripe border :data="tableData">
                <el-table-column label="车牌号" prop="plate"></el-table-column>
                <el-table-column label="入场时间" prop="inTime"></el-table-column>
                <el-table-column label="入场图片">
                    <template slot-scope="scope">
                        <span :id="'member_in_' + scope.row.id" style="display: flex; flex-direction: row; width: 100%; height: 45px;">
                            <img @click="handleImg('member_in_'+scope.row.id)" :src="scope.row.inImgageUrl"  min-width="44" height="44"/>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="出场时间" prop="outTime"></el-table-column>
                <el-table-column label="出场图片">
                    <template slot-scope="scope">
                        <span :id="'member_out_' + scope.row.id" style="display: flex; flex-direction: row; width: 100%; height: 45px;">
                            <img @click="handleImg('member_out_'+scope.row.id)" :src="scope.row.outImgageUrl"  min-width="44" height="44"/>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="车辆类型" prop="feeDesc"></el-table-column>
                <el-table-column label="备注" prop="memo"></el-table-column>
                <el-table-column label="操作"></el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize"
                  show-total show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Row>
    </Card>
</template>

<script>
    import Viewer from 'viewerjs';
    require('viewerjs/dist/viewer.css');

    export default {
        data(){
            return{
                pageTotal:0,
                pageNum:1,
                pageSize:10,

                tableData:[],
                houseList:[],
                parkingList:[],

                filters:{},
            }
        },

        created(){
            this.gethouse();
        },

        methods:{
            gethouse() {
                this.postRequest("/api/housing/getHousingByLogin").then(resp => {
                    this.houseList = resp;
                    this.filters.housingId = resp[0].id;
                    this.houseChange();
                });
            },
            houseChange(){
                this.getRequest("/api/park/record/parkings?housingId="+this.filters.housingId).then(resp=>{
                    if (resp.code==20000){
                        this.parkingList=resp.data;
                        this.filters.parkingId=resp.data[0].parkingId;
                        this.parkingLotChange();
                    }
                });
            },
            parkingLotChange(){
                this.loadData();
            },
            loadData(){
                let params="&housingId="+this.filters.housingId+"&parkingId="+this.filters.parkingId
                this.getRequest("/api/park/record/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+params).then(resp=>{
                    console.info(resp)
                    if (resp.code==20000){
                        this.tableData=resp.data.list;
                        this.pageTotal=resp.data.total;
                        this.pageNum=resp.data.pageNum;
                    }
                });
            },
            handleImg(id){
                new Viewer(document.getElementById(id));
            },
            handlePage(value){
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value){
                this.pageSize = value;
                this.loadData();
            },
        },
    }
</script>
